<template>
  <el-container class="layout-ltb">
    <el-container>
      <el-header height="114">
        <el-form
          ref="queryFormRef"
          :model="queryParams"
          size="small"
          label-position="right"
          class="search-form mt-[20px]"
        >
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item prop="TaskSetName">
                <el-input
                  v-model="queryParams.TaskSetName"
                  placeholder="请输入任务名称搜索"
                  maxlength="20"
                  show-word-limit
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-button
                @click="f_HandelQuery"
                type="primary"
                class="btn-search"
              >
                <i-ep-search class="mr-[2px] text-size-[11px] v-bottom" />搜索
              </el-button>
              <el-button
                @click="f_HandleReset"
                type="warning"
                class="btn-reset"
              >
                <i-ep-refresh class="mr-[2px] text-size-[11px] v-bottom" />重置
              </el-button>
            </el-col>
          </el-row>
        </el-form>

        <el-row :gutter="20">
          <el-col :span="6" />
        </el-row>
      </el-header>
      <el-main>
        <div>
          <div class="toolbar">
            <el-button
              type="primary"
              class="btn-add"
              @click="f_OpenDialog({ taskSetId: null })"
              ><i-ep-plus class="mr-[4px] text-size-[11px]" /> 新增</el-button
            >
          </div>
          <el-table
            v-if="tableData.length"
            :data="tableData"
            border
            :height="tableHeight"
            header-row-class-name="table-header"
            size="small"
          >
            <el-table-column
              type="index"
              width="60"
              label="序号"
              align="center"
            />
            <el-table-column
              prop="taskSetName"
              width="160"
              label="任务名称"
              align="center"
              show-overflow-tooltip
            />
            <el-table-column prop="inspCount" label="任务数量" align="center">
              <template #default="scope">
                {{ scope.row.inspCount }}个
              </template>
            </el-table-column>
            <el-table-column
              prop="inspDeppartmentName"
              label="巡检部门"
              align="center"
              show-overflow-tooltip
            />
            <el-table-column
              prop="inspUserName"
              label="巡检员"
              align="center"
              show-overflow-tooltip
            />
            <el-table-column prop="isEnabled" label="状态" align="center">
              <template #default="scope">
                <el-tag v-if="scope.row.isEnabled" type="primary" size="small"
                  >启用</el-tag
                >
                <el-tag v-else type="warning" size="small">暂停</el-tag>
              </template>
            </el-table-column>
            <el-table-column
              prop="createTime"
              label="创建时间"
              align="center"
              show-overflow-tooltip
            />
            <el-table-column
              prop="remark"
              label="备注"
              align="center"
              show-overflow-tooltip
            />
            <el-table-column
              label="操作"
              align="center"
              width="210"
              fixed="right"
            >
              <template #default="scope">
                <el-button
                  @click="f_OpenDialog(scope.row)"
                  type="primary"
                  size="small"
                  link
                  ><i-ep-edit
                    class="mr-[2px] text-size-[11px] v-bottom"
                  />编辑</el-button
                >
                <el-button
                  @click="f_HandleCopy(scope.row)"
                  type="primary"
                  size="small"
                  link
                  ><i-ep-edit
                    class="mr-[2px] text-size-[11px] v-bottom"
                  />复制</el-button
                >
                <el-button
                  @click="f_HandleDel(scope.row)"
                  type="danger"
                  size="small"
                  link
                  ><i-ep-delete
                    class="mr-[2px] text-size-[11px] v-bottom"
                  />删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
          <noneData :noneShow="!tableData.length" :height="tableHeight" />
          <pagination
            size="small"
            v-if="total > 0"
            v-model:total="total"
            v-model:page="queryParams.pageIndex"
            v-model:limit="queryParams.pageSize"
            @pagination="f_HandelQuery"
          />
        </div>
      </el-main>
    </el-container>

    <!-- 弹窗 -->
    <el-drawer
      v-model="dialog.visible"
      title="巡检任务设置"
      size="1400"
      append-to-body
      @close="f_CloseDialog"
      class="bg-[#f5f5f5!important]"
      destroy-on-close
    >
      <edit_drawer
        :point-data="pointData"
        :polygon-data="polygonData"
        :dep-data="depData"
        :line-data="lineData"
        :form="form"
        @close="f_CloseDialog"
      />
    </el-drawer>
  </el-container>
</template>

<script setup lang="ts">
defineOptions({
  name: "Inspection",
  inheritAttrs: false,
});
import PlanAPI from "@/api/PlanAPI";
import TaskSetAPI from "@/api/TaskSetAPI";
import GisPointInfoAPI from "@/api/GisPointInfoAPI";
import GisPolygonInfoAPI from "@/api/GisPolygonInfoAPI";
import LineAPI from "@/api/LineAPI";
import edit_drawer from "./edit.vue";
let tableHeight = ref(0);
// 弹窗对象
const dialog = reactive({
  visible: false,
  title: "",
});
const queryFormRef = ref(ElForm);
const loading = ref(false);
const total = ref(0);
const tableData = ref([]);
const depData = ref([]);
const lineData = ref([]);
const polygonData = ref([]);
const pointData = ref([]);

const form = ref({
  taskSetId: 0,
  taskSetName: "",
  taskSetType: 2,
  inspDestId: undefined,
  inspDestName: "",
  inspDepartmentId: undefined,
  inspDeppartmentName: "",
  inspUserId: undefined,
  inspUserName: "",
  remark: "",
  isEnabled: true,
  details: [],
  inspTempContent: [],
});

const queryParams = reactive({
  pageIndex: 1,
  pageSize: 10,
  TaskSetName: "",
});

// 重置
function f_HandleReset() {
  queryFormRef.value.resetFields();
  queryParams.pageIndex = 1;
}

// 复制
function f_HandleCopy(data: any) {
  ElMessageBox.confirm("确认复制该条数据?", "警告", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
    loading.value = true;
    TaskSetAPI.api_copy(data.taskSetId).then(({ data, succeeded }) => {
      if (succeeded) {
        ElMessage.success("复制成功！");
        f_HandelQuery();
      }
    });
  });
}

// 删除
function f_HandleDel(data: any) {
  ElMessageBox.confirm("确认删除数据?", "警告", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      loading.value = true;
      TaskSetAPI.api_del(data.taskSetId).then(({ data, errors, succeeded }) => {
        if (succeeded) {
          ElMessage.success("删除成功！");
          f_HandelQuery();
        } else {
          ElMessage.error(errors);
        }
        loading.value = false;
      });
    })
    .catch(() => ElMessage.info("已取消删除!"));
}

// 打开弹窗
function f_OpenDialog(data: any) {
  if (data.isEnabled) {
    let planParams = {
      pageIndex: 1,
      pageSize: 1,
      TaskSetId: data.taskSetId,
    };
    PlanAPI.api_query(planParams).then((res) => {
      if (res.succeeded) {
        if (res.data.items && res.data.items.length > 0) {
          ElMessageBox.confirm("巡检任务正在使用中，确认要编辑吗?", "警告", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          }).then(() => {
            // form.value = Object.assign({}, data);
            form.value.taskSetId = data.taskSetId;
            form.value.taskSetName = data.taskSetName;
            form.value.taskSetType = data.taskSetType;
            form.value.inspDestId = data.inspDestId;
            form.value.inspDepartmentId = data.inspDepartmentId;
            form.value.inspUserId = data.inspUserId;
            form.value.remark = data.remark;
            form.value.isEnabled = data.isEnabled;
            form.value.details = data.details;
            form.value.inspTempContent = data.inspTempContent
              ? data.inspTempContent
              : [];

            dialog.visible = true;
          });
        } else {
          if (data.taskSetId) {
            // form.value = Object.assign({}, data);
            form.value.taskSetId = data.taskSetId;
            form.value.taskSetName = data.taskSetName;
            form.value.taskSetType = data.taskSetType;
            form.value.inspDestId = data.inspDestId;
            form.value.inspDepartmentId = data.inspDepartmentId;
            form.value.inspUserId = data.inspUserId;
            form.value.remark = data.remark;
            form.value.isEnabled = data.isEnabled;
            form.value.details = data.details;
            form.value.inspTempContent = data.inspTempContent
              ? data.inspTempContent
              : [];
          } else {
            form.value.taskSetId = 0;
            form.value.taskSetName = "";
            form.value.taskSetType = 2;
            form.value.inspDestId = undefined;
            form.value.inspDepartmentId = undefined;
            form.value.inspUserId = undefined;
            form.value.remark = "";
            form.value.isEnabled = true;
            form.value.details = [];
            form.value.inspTempContent = [];
          }
          dialog.visible = true;
        }
      }
    });
  } else {
    if (data.taskSetId) {
      // form.value = Object.assign({}, data);
      form.value.taskSetId = data.taskSetId;
      form.value.taskSetName = data.taskSetName;
      form.value.taskSetType = data.taskSetType;
      form.value.inspDestId = data.inspDestId;
      form.value.inspDepartmentId = data.inspDepartmentId;
      form.value.inspUserId = data.inspUserId;
      form.value.remark = data.remark;
      form.value.isEnabled = data.isEnabled;
      form.value.details = data.details;
      form.value.inspTempContent = data.inspTempContent
        ? data.inspTempContent
        : [];
    } else {
      form.value.taskSetId = 0;
      form.value.taskSetName = "";
      form.value.taskSetType = 2;
      form.value.inspDestId = undefined;
      form.value.inspDepartmentId = undefined;
      form.value.inspUserId = undefined;
      form.value.remark = "";
      form.value.isEnabled = true;
      form.value.details = [];
      form.value.inspTempContent = [];
    }
    dialog.visible = true;
  }
}

// 关闭弹框
function f_CloseDialog() {
  dialog.visible = false;
  queryParams.pageIndex = 1;
  f_HandelQuery();
}

// 查询
function f_HandelQuery() {
  loading.value = true;
  TaskSetAPI.api_query(queryParams).then(({ data, succeeded }) => {
    if (succeeded) {
      tableData.value = data.items;
      total.value = data.totalCount;
    }
  });
}

// 查询 部门
function f_HandelQueryDep() {
  TaskSetAPI.api_query_dep().then(({ data, succeeded }) => {
    if (succeeded) {
      depData.value = data;
    }
  });
}

// 查询 路线
function f_HandelQueryLine() {
  let params = {
    pageSize: 10000,
    pageIndex: 1,
  };
  LineAPI.api_query(params).then(({ data, succeeded }) => {
    if (succeeded) {
      lineData.value = data.items;
    }
  });
}

// 查询 区域
function f_HandelQueryPolygon() {
  let params = {
    pageSize: 10000,
    pageIndex: 1,
  };
  GisPolygonInfoAPI.api_query_geo(params).then(({ data, succeeded }) => {
    if (succeeded) {
      polygonData.value = data.items;
    }
  });
}

// 查询 管段
function f_HandleQueryPointLine() {
  let params = {
    pageSize: 10000,
    pageIndex: 1,
    isCoordinate: true,
  };
  GisPointInfoAPI.api_query(params).then(({ data, succeeded }) => {
    if (succeeded) {
      pointData.value = data.items;
    }
  });
}

window.onresize = () => {
  return (() => {
    tableHeight.value = window.innerHeight - 330;
  })();
};

onMounted(() => {
  f_HandelQueryDep();
  f_HandelQueryLine();
  f_HandelQueryPolygon();
  f_HandleQueryPointLine();
  f_HandelQuery();
  tableHeight.value = window.innerHeight - 330;
});
</script>
<style scoped lang="scss">
.mydrawer {
  background: red !important;
}
</style>
